<template>
  <DraggableModal :visible="props.showModal" :title="`${props.title}用户`" :maskClosable="true" @ok="modalOkFn"
    @cancel="modalCancelFn">
    <Form ref="formRef" :model="state.data" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 16 }">
      <a-form-item label="用户名" name="username">
        <Input v-model:value="state.data.username" :disabled="data.extData1" />
      </a-form-item>

      <a-form-item label="姓名" name="name">
        <Input v-model:value="state.data.name" :disabled="data.extData1" />
      </a-form-item>

      <a-form-item v-if="props.title === '新增'" label="密码" name="password">
        <Input v-model:value="state.data.password" />
      </a-form-item>

      <a-form-item label="身份卡" name="identityCode">
        <Input v-model:value="state.data.identityCode" />
      </a-form-item>

      <a-form-item label="电话号" name="telephone">
        <Input v-model:value="state.data.telephone" :disabled="data.extData1" />
      </a-form-item>

      <a-form-item label="角色" name="roleIds">
        <Select v-model:value="state.data.roleIds" :options="state.roleList" />
      </a-form-item>
    </Form>
  </DraggableModal>
</template>

<script setup lang="ts">
import { DraggableModal } from '@/framework/components/core/draggable-modal';
import { message, Form, Input, Select } from 'ant-design-vue';
import { roleSearch } from '@/api/role-data';
import { reactive, ref, watch } from 'vue';
import config from '@/config';
import { userAdd, userUpdate } from '@/api/user-data';

/**
 * const
 */
const props = withDefaults(
  defineProps<{
    showModal: boolean;
    data: any;
    title: string;
  }>(),
  {
    showModal: false,
  },
);
watch(
  () => props.showModal,
  () => {
    if (props.showModal) {
      getRoleList();
      state.data = props.data;
    }
  },
);
const emits = defineEmits<{
  (e: 'update:showModal', state: boolean): void;
  (e: 'editModalOk'): void;
}>();
const formRef = ref();
const getRoleList = async () => {
  const params = { status: '1', pageNumber: 0, pageSize: 1000, sort: 'id', order: 'asc' };
  const res = await roleSearch(params);
  state.roleList = res.result.map((item) => ({
    label: item.name,
    value: item.id,
  }));
};

/**
 * 检查密码复杂度
 */
const checkPassword = (password) => {
  let ls = 0;
  if (password.length < 8) {
    return 0;
  }
  if (password.match(/\s+/g)) {
    return 0;
  }
  if (password.match(/([a-z])+/)) {
    ls++;
  }
  if (password.match(/([0-9])+/)) {
    ls++;
  }
  if (password.match(/([A-Z])+/)) {
    ls++;
  }
  if (password.match(/[^a-zA-Z0-9]+/)) {
    ls++;
  }
  return ls;
};
/**
 * data
 */
const state: {
  data: any;
  roleList: any[];
} = reactive({
  data: {},
  roleList: [],
});
const rules = {
  username: [{ required: true, message: '数据必填!' }],
  name: [{ required: true, message: '数据必填!' }],
  roleIds: [{ required: true, message: '数据必填!' }],
  password: [{ required: true, message: '数据必填!' }],
};

/**
 * fn
 */
const modalOkFn = async () => {
  try {
    await formRef.value?.validateFields();
  } catch {
    return;
  }
  let params: any = {
    name: state.data.name,
    username: state.data.username,
    password: state.data.password ?? '',
    identityCode: state.data.identityCode,
    telephone: state.data.telephone,
    roleIds: [state.data.roleIds],
  };
  if (props.title === '新增') {
    // 密码校验
    if (checkPassword(params.password) < config['passwordStrength']) {
      return message.warn('对不起，密码必须包含小写字母/大写字母/数字/特殊符号中的三种,且长度不少于8位');
    }
    await userAdd(params);
  } else {
    params.id = state.data.id;
    await userUpdate(params);
  }
  message.success('操作成功！');
  emits('editModalOk');
  modalCancelFn();
};
const modalCancelFn = () => {
  formRef.value?.clearValidate();
  state.data = {};
  emits('update:showModal', false);
};
</script>

<style scoped></style>
